import React, { useState } from 'react';
import { Folder, Arrow } from '@/assets/icons';
import styles from './style.less';

export default ({ label, defaultCollapsed, pList, children }) => {
  const [collapsed, setCollapsed] = useState(!!defaultCollapsed);

  return (
    <>
      <div
        className={styles.treeItemBox}
        style={{ cursor: 'pointer' }}
        onClick={() => {
          setCollapsed((status) => !status);
        }}
      >
        <div
          className={styles.treeItem}
          style={{ paddingLeft: `${pList.length * 30}px` }}
        >
          <div
            className={styles.treeItemIconRotate}
            style={{ transform: `rotate(${collapsed ? '-90deg' : '0deg'})` }}
          >
            <Arrow className={styles.treeItemIconText} />
          </div>
          <Folder className={styles.treeItemIconText} />
          <span className={styles.treeItemText}>{label}</span>
        </div>
      </div>
      <div style={{ display: collapsed ? 'none' : 'block' }}>{children}</div>
    </>
  );
};
